<template>
  <header class="header-bar">
    <router-link to="/:0/dashboard/home" class="logo-box">
      <div class="logo">
        <img src="../../../assets/logo2.png" alt="">
      </div>
      <div class="title">保利 EBA</div>
    </router-link>
    <div class="area-box" @mouseenter="onAreaBoxEnter">
      <x-area v-if="isHome"></x-area>
      <x-area v-if="!isHome" province="广东" city="广州"></x-area>

      <div class="area-opation">
        <div class="opation" v-for="notification in notifications">
          <router-link :to="notification.path">
            <div class="name">
                <span>{{notification.name}}</span>
            </div>
          </router-link>
        </div>
      </div>

    </div>
    <nav class="main-nav">
      <ul>
        <li v-for="i in header">
          <router-link :to="i.path">{{i.name}}</router-link>
        </li>
      </ul>
    </nav>
    <div class="state-container">
      <div class="user-msg">
        <img class="user-header-img" src="../../../../static/images/avatar.png" alt="">
        <div class="user-name">
          <span>Admin</span>
        </div>
      </div>
      <div class="more" @mouseenter="onShowMenu" @mouseleave="onHideMenu">
        <span class="triangle"></span>
      </div>
      <div class="alert-icon" :class="{'unread': alertUnread}" @click.stop.prevent="showAlertList = !showAlertList">
        <div class="icon"></div>
      </div>
      <div class="xlink-logo">
        <img class="xlink-logo-img" src="../../../../static/images/u258.png" alt="">
      </div>
      <div class="menu-box" v-show="showMenu" @mouseenter="onShowMenu" @mouseleave="onHideMenu">
        <div class="menu" @click="signOut">
          <span>退出</span>
        </div>
      </div>
    </div>

    <alert
      :hidden="!showAlertList"
      @close="showAlertList = false"
      @read-state-change="onReadStateChange">
    </alert>


  </header>
</template>

<script>
import XArea from 'components/view/other/XArea'
import Alert from './components/alert'
import HEADERLIST from 'static/data/header/header.json'
import _ from 'lodash'

export default {
  name: 'HeaderBar',

  // store: {
  //
  // },

  components: {
    XArea,
    Alert
  },

  data () {
    return {
      notifications: [ {
        area: '东莞',
        path: '/:0/dashboard/monitor',
        name: '保利 天悦',
        value: {
          green: 2000,
          yellow: 835,
          red: 300,
          gray: 700
        }
      }, {
        area: '合肥',
        path: '/:1/dashboard/water',
        name: '保利 香槟',
        value: {
          green: 5000,
          yellow: 1500,
          red: 500,
          gray: 989
        }
      }],
      showMenu: false,
      alertUnread: false,
      showAlertList: false,
      headerList: []
    }
  },

  computed: {
    isHome () {
      return this.$route.path === '/'
    },
    header () {
      // 根据路由ID去拿到需要的list列表
      // 暂时先写了前四个
      let res
      switch (this.$route.path.split('/')[1]) {
        case ':0':
          res = HEADERLIST[0].list
          break
        case ':1':
          res = HEADERLIST[1].list
          break
        case ':2':
          res = HEADERLIST[2].list
          break
        case ':3':
          res = HEADERLIST[3].list
          break
      }

      return _.clone(res)
    }
  },
  beforeMount () {
  },

  methods: {
    onAreaBoxEnter () {
      let myInput = document.getElementById('search')
      if (myInput === document.activeElement) {
        myInput.blur()
      }
    },
    signOut () {
      window.localStorage.removeItem('accessToken')
      this.$router.push('/login')
    },

    onShowMenu () {
      window.clearTimeout(this.tid)
      this.showMenu = true
    },

    onHideMenu () {
      this.tid = window.setTimeout(() => {
        this.showMenu = false
      }, 300)
    },

    onReadStateChange (unRead) {
      this.alertUnread = unRead
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/stylus/common'

.header-bar {
  fixed: left top;
  size: 100% 52px;
  min-width: 1000px;
  background: #1E1E1E;
  z-index: 100;

  .logo-box {
    clearfix()
    display: inline-block;
    height: 100%;
  }

  .logo {
    float: left;
    size: 33px;
    margin: 10px 10px 0 14px;

    img {
      display: inline-block;
      margin-bottom: 0;
      size: 100%;
    }
  }

  .title {
    float: left;
    color: #FFF;
    font-size: 18px;
    margin-top: 13px;
  }

  .area-box {
    position: absolute;
    top: 0;
    left: 150px;
    width: 200px;


    .area-opation {
      position: absolute;
      top: 50px;
      left: -150px;
      width: 0;
      height: 1000px;
      background: #363636;
      transition: all ease 0.2s;
      overflow: auto;
      opacity: 0;
      color: #fff;
      box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.25)
      padding-bottom: 400px;
      padding: 0 0;
      box-sizing: border-box;
    }

    &:hover .area-opation {
      width: 280px;
      opacity: 1;
      padding: 0 15px;

    }

    .opation {
      height: 60px;
      line-height: 60px;
      padding-left: 20px;
      border-bottom: 1px solid rgba(255,255,255,0.2);
      transition: all ease 0.3s;

      &:hover {
        padding-left: 25px;
        background: rgba(255,255,255,0.05)
      }
    }
  }

  .main-nav {
    absolute left 350px top 0

    li {
      float: left;

      a {
        display: block;
        padding: 0 15px;
        line-height: 52px;
        color: #FFF;
        font-size: 14px;
        position: relative;

        &:hover {
          background-color: #DE4E58;

          &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            width: 100%;
            background: #999;
          }
        }
      }

      .router-link-active {
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          height: 3px;
          width: 100%;
          background: #999;
        }
      }
    }
  }

  .state-container {
    position: absolute;
    top: 0;
    right: 0;
    /*width: 180px;*/
    height: 52px;
    padding: 8px;
    padding-right: 0;
    box-sizing: border-box;

    .user-msg {
      display: inline-block;
      max-width: 220px;
      height: 36px;
      line-height: 36px;
      vertical-align: middle;
      padding-right: 5px;

      .user-header-img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        overflow: hidden;
        border: 0;
        vertical-align: middle;
      }
      .user-name {
        opacity: 0.7;
        display: inline-block;
        padding-left: 5px;
        font-size: 14px;
        vertical-align: middle;
      }
    }
    .xlink-logo{
      display: inline-block;
      max-width: 220px;
      height: 36px;
      line-height: 36px;
      vertical-align: middle;
      margin-right: 18px;
      .xlink-logo-img{
        width: 80px;
        margin-top: 4px;
        height: 28px;
        opacity: 0.7
      }
    }

    .alert-icon {
      display: inline-block;
      position: relative;
      padding-right: 20px;
      width: 36px;
      height: 36px;
      border-right: 1px solid rgba(255,255,255,0.5);
      vertical-align: middle;
      cursor pointer
      margin-right: 14px;

      .icon {
        width: 100%;
        height: 100%;
        margin-left: 9px;
        opacity: 0.7;
        background: no-repeat url('../../../assets/images/u145.png') center center / 20px auto
      }
    }
    .alert-icon.unread:after {
      position absolute
      right 13px
      top 5px
      display block
      content ''
      width 10px
      height 10px
      background #bb3931
      border-radius 10px
    }
    .more {
      opacity: 0.7;
      display: inline-block;
      width: 18px;
      text-align: center;
      margin-right: 0px;
      line-height: 36px;
      vertical-align: sub;

      .triangle {
        triangle(#fff, 13px)
      }
    }


    .menu-box {
      position absolute
      top 100%
      right 0px
      background #1e1e1e
      padding 10px
      overflow hidden
      .menu {
        box-sizing border-box
        width 150px
        height 40px
        line-height 40px
        padding-right 10px
        font-size 15px
        text-align right
        cursor pointer
        transition all ease 0.2s
        /*border-bottom 1px solid rgba(255,255,255,0.2)*/
      }
      .menu:hover {
        background rgba(255,255,255,0.1)
        padding-right 15px
      }

    }


  }
  /*.state-container:hover {
    .menu-box {
      padding 10px
      .menu {
        height 40px
      }
    }
  }*/
}
</style>
